<script setup lang="ts">
  import { reactive, computed, onMounted } from 'vue';
  import { RangePicker, Form, FormItem, Select, SelectOption } from 'ant-design-vue';
  import moment from 'moment';
  import dayjs from 'dayjs'
  import { ref } from 'vue';
  import { getDictionaryRecordListApi } from '/@/api/sys/dictionary/dictionary-record';
  import { useUserStore } from '/@/store/modules/user';
  import { getAllUserListByHotelIdApi } from '/@/api/sys/user';
  const emit = defineEmits<{
    (e: 'searchData', time: string): void
    (e: 'onSearchChange', time: string, params?: { orderStatus?: string; xiaoshou?: string }): void
    (e: 'searchDataBtn', time: string, params?: { orderStatus?: string; xiaoshou?: string }): void
  }>()
  const state = reactive({
    marginRight10: {
      marginRight: '10px',
    },
    marginRight15: {
      marginRight: '15px',
    },
    yearMonthValue: <any>['', ''],
  });

  const formLabel = {
    orderStatus: '状态',
    xiaoShou: '跟进人'
  }

  const isCurrentYearMonth = computed(() => {
    const stratTime = moment(businessDay.value).startOf('month').format('YYYY-MM-DD')
    const endTime = moment(businessDay.value).endOf('month').format('YYYY-MM-DD')
    const time = state.yearMonthValue
    return time && time[0] === stratTime && time[1] === endTime;
  });

  const isLastYearMonth = computed(() => {
    const start = dayjs(businessDay.value).subtract(30, 'day').format('YYYY-MM-DD')
    const end = dayjs(businessDay.value).format('YYYY-MM-DD')
    const time = state.yearMonthValue
    return time && time[0] === start && time[1] === end;
  });

  const isTodayTime = computed(() => {
    const end = dayjs(businessDay.value).format('YYYY-MM-DD')
    const time = state.yearMonthValue
    return time && time[0] === end && time[1] === end;
  });

  const isYesterdayTime = computed(() => {
    const end = dayjs(businessDay.value).subtract(1, 'day').format('YYYY-MM-DD')
    const time = state.yearMonthValue
    return time && time[0] === end && time[1] === end;
  });

  const isLastMonthTime = computed(() => {
    const start_time = dayjs(businessDay.value).add(-1, 'month').startOf('month').format('YYYY-MM-DD')
      const end_time = dayjs(businessDay.value).add(-1, 'month').endOf('month').format('YYYY-MM-DD')
    const time = state.yearMonthValue
    return time && time[0] === start_time && time[1] === end_time;
  });

  const isLastSevenTime = computed(() => {
    const start_time = dayjs(businessDay.value).subtract(7, 'day').format('YYYY-MM-DD')
      const end_time = dayjs(businessDay.value).format('YYYY-MM-DD')
    const time = state.yearMonthValue
    return time && time[0] === start_time && time[1] === end_time;
  });

  function init(isFlag?: boolean) {
    // 日期初始化
    const stratTime = dayjs().startOf('month').format('YYYY-MM-DD')
    const endTime = dayjs().endOf('month').format('YYYY-MM-DD')
    state.yearMonthValue = [stratTime, endTime]
    searchData();
    if(isFlag) {
      formState.value.orderStatus = void 0;
      formState.value.xiaoshou = void 0
    }
  }

  const enumObj = {
    currentMonth: () => {
      const stratTime = dayjs(businessDay.value).startOf('month').format('YYYY-MM-DD')
      const endTime = dayjs(businessDay.value).endOf('month').format('YYYY-MM-DD')
      return state.yearMonthValue = [stratTime, endTime]
    },
    last30Days: () => {
      return state.yearMonthValue = [dayjs(businessDay.value).subtract(30, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
    },
    today: () => {
      const formatTime = dayjs(businessDay.value).format('YYYY-MM-DD')
      return state.yearMonthValue = [formatTime, formatTime]
    },
    yesterday: () => {
      const yesterday = dayjs(businessDay.value).subtract(1, 'day').format('YYYY-MM-DD')
      return state.yearMonthValue = [yesterday, yesterday]
    },
    lastMonth: () => {
      const start_time = dayjs(businessDay.value).add(-1, 'month').startOf('month').format('YYYY-MM-DD')
      const end_time = dayjs(businessDay.value).add(-1, 'month').endOf('month').format('YYYY-MM-DD')
      return state.yearMonthValue = [start_time, end_time]
    },
    last7Days: () => {
      const seven = dayjs(businessDay.value).subtract(7, 'day').format('YYYY-MM-DD')
      const today = dayjs(businessDay.value).format('YYYY-MM-DD')
      return state.yearMonthValue = [seven, today]
    }
  }

  function monthClick(clickType: string) {
    enumObj[clickType] && enumObj[clickType]()
    console.log('object123 :>> ', state.yearMonthValue, formState.value);
    emit('onSearchChange', state.yearMonthValue, formState.value)
  }

  function searchData() {
    emit('searchData', state.yearMonthValue);
  }
  function searchDataBtn() {
    emit('searchDataBtn', state.yearMonthValue, formState.value);
  }

  init();

  const formState = ref({
    orderStatus: void 0,
    xiaoshou: void 0
  })
  const tem = {...document}
  const orderStatusList = ref<any[]>([])
  const getOrderStuatusByDictionariesFn = () => {
    getDictionaryRecordListApi({ dictType: 'order_status' }).then(result => {
      orderStatusList.value = (Array.isArray(result.data) ? result.data : []).map(item => {
        return {
          label: item?.dictLabel,
          value: item?.dictValue
        }
      })
    })
  }

  const userStore = useUserStore()
  const businessDay = computed(() => {
    return userStore.ParamSystem?.businessDay
  })
  const followUpPersonList = ref<any[]>([])
  const getFollowUpPersonFn = async () => {
    if(!userStore.getParamSystem?.hotelId) return
    const result = await getAllUserListByHotelIdApi(userStore.getParamSystem.hotelId)
    if(Array.isArray(result.data)) followUpPersonList.value = result.data
  }

  onMounted(() => {
    getOrderStuatusByDictionariesFn()
    getFollowUpPersonFn()
  })
</script>

<template>
  <div class="timeWrapper" :style="state.marginRight10">
    <Form layout="inline" :style="{marginRight: '20px', marginBottom: '24px'}">
      <FormItem :label="formLabel.orderStatus">
        <Select :getPopupContainer="tirggerNode => tirggerNode.parentNode || tem.body" :style="{width: '130px'}" v-model:value="formState.orderStatus" placeholder="请选择状态">
          <SelectOption v-for="item in orderStatusList" :key="item?.value" :value="item?.value">{{ item?.label }}</SelectOption>
        </Select>
      </FormItem>
      <FormItem :label="formLabel.xiaoShou">
        <Select :getPopupContainer="tirggerNode => tirggerNode.parentNode || tem.body" v-model:value="formState.xiaoshou" placeholder="全部" :style="{width: '110px'}">
          <SelectOption v-for="item in followUpPersonList" :key="item?.userName" :value="item?.userName">{{ item?.userName }}</SelectOption>
        </Select>
      </FormItem>
    </Form>
    <section class="timeQucikWrapper">
      <span
        class="timeQuickItem"
        :style="isTodayTime ? { color: '#2563EB', ...state.marginRight15 } : state.marginRight15"
        @click="monthClick('today')"
      >
        今日
      </span>
      <span
        class="timeQuickItem"
        :style="isYesterdayTime ? { color: '#2563EB', ...state.marginRight15 } : state.marginRight15"
        @click="monthClick('yesterday')"
      >
        昨日
      </span>
      <span
        class="timeQuickItem"
        :style="isCurrentYearMonth ? { color: '#2563EB', ...state.marginRight15 } : state.marginRight15"
        @click="monthClick('currentMonth')"
      >
        本月
      </span>
      <span
        class="timeQuickItem"
        :style="isLastMonthTime ? { color: '#2563EB' } : {}"
        @click="monthClick('lastMonth')"
      >
        上月
      </span>
      <span
        class="timeQuickItem"
        :style="isLastSevenTime ? { color: '#2563EB' } : {}"
        @click="monthClick('last7Days')"
      >
        近7天
      </span>
      <span
        class="timeQuickItem"
        :style="isLastYearMonth ? { color: '#2563EB' } : {}"
        @click="monthClick('last30Days')"
      >
        近30天
      </span>
    </section>
    <RangePicker v-model:value="state.yearMonthValue" value-format="YYYY-MM-DD" />
  </div>
  <a-button class="btn" type="primary" :style="state.marginRight10" @click="searchDataBtn"> 查询 </a-button>
  <a-button @click="init(true)" class="btn">重置</a-button>
</template>

<style lang="scss" scoped>
:deep(.ant-select-selector) {
  border-radius: 8px !important;
}
  :deep .ant-picker {
    margin-bottom: 24px;
    // border-color: rgb(66, 72, 103);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  .timeWrapper {
    // transform: translateY(50%);
    margin-bottom: -20px;
    display: flex;
    align-items: center;
  }
  .timeQucikWrapper {
    margin-bottom: 24px;
    min-width: 136px;
    box-sizing: border-box;
    padding: 4px 20px;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #ccc;
    border-right: none;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
  }
  .timeQuickItem {
    padding: 0 5px;
    cursor: pointer;
  }
  .btn {
    border-radius: 12px;
  }
</style>
